<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 角色组件 -->
            <role />
          </el-tab-pane>
          <el-tab-pane label="公司信息">
            <el-alert title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改" type="info" show-icon :closable="false" />
            <el-form :model="companyInfo" label-width="120px" style="margin-top: 50px">
              <el-form-item label="公司名称">
                <el-input v-model="companyInfo.name" disabled style="width: 400px" />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="companyInfo.companyAddress" disabled style="width: 400px" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="companyInfo.mailbox" disabled style="width: 400px" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="companyInfo.remarks" type="textarea" :rows="3" disabled style="width: 400px" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import Role from './role'
import { getCompanyInfo } from '@/api/setting'
export default {
  components: {
    Role
  },
  data() {
    return {
      companyInfo: {
        name: '',
        companyAddress: '',
        mailbox: '',
        remarks: ''
      }
    }
  },
  created() {
    this.getCompanyInfo()
  },
  methods: {
    // 获取公司详情信息
    async getCompanyInfo() {
      // 从vuex中获取公司id
      this.companyInfo = await getCompanyInfo(this.$store.getters.companyId)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-tabs__item {
    font-size: 18px;
  }
}
</style>
